import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { Demo2Component } from './demo2/demo2.component';
import { MultipleComponent } from './multiple/multiple.component';
import { Demo5Component } from './demo5/demo5.component';
import { Demo6Component } from './demo6/demo6.component';
import { Demo7Component } from './demo7/demo7.component';
import { Demo8Component } from './demo8/demo8.component';
import { Demo9Component } from './demo9/demo9.component';
import { Demo10Component } from './demo10/demo10.component';
import { DisabledComponent } from './disabled/disabled.component';
import { SizeComponent } from './size/size.component';
import { AsyncDataComponent } from './async-data/async-data.component';
import { SimpleComponent } from './simple/simple.component';
import { QuickAddComponent } from 'case/select/quick-add/quick-add.component';

export const SelectConfig: CaseConfigType = {
  location: 'Select',
  description: `界面空间有限，且选项数量在2个以上，使用下拉选择。当下拉选择中选项个数不确定且可能会超过20个时，需提供按照关键字搜索过滤的功能。`,
  description_en: `The interface space is limited, and the number of options is more than 2, using the drop-down selection. When the number of options in the drop-down selection is uncertain and may exceed 20, the function of filtering by keyword search is required.`,
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/select/basic/basic.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic',
      demoDescription: '基础使用，垃圾数据不会被选中',
      demoDescription_en: 'Basic use, garbage data will not be selected.',
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/select/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'size',
      demoDescription: '选择框尺寸。',
      demoDescription_en: 'The size of select.',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/select/demo2/demo2.component',
      demoTitle: '单选含子项',
      demoTitle_en: 'Single choice with children.',
      demoDescription: '单选含子项,子项选中不会关联父',
      demoDescription_en: 'Single item has a child item, and the child item is selected without a parent.',
    },
    {
      demo: MultipleComponent,
      codePath: 'showcase/select/multiple/multiple.component',
      demoTitle: '多选',
      demoTitle_en: 'Checkbox',
      demoDescription: '多选，可以通过配置 lvMaxTagCount 限制最多显示选项个数。',
      demoDescription_en: 'For multiple selections, you can limit the maximum number of displayed options by configuring lvMaxTagCount.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/select/demo5/demo5.component',
      demoTitle: '带搜索单选',
      demoTitle_en: 'With search radio',
      demoDescription: '带搜索单选',
      demoDescription_en: 'With search radio.',
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/select/demo6/demo6.component',
      demoTitle: '带搜索多选',
      demoTitle_en: 'With search checkbox',
      demoDescription: '带搜索多选',
      demoDescription_en: 'With search checkbox.',
    },
    {
      demo: Demo7Component,
      codePath: 'showcase/select/demo7/demo7.component',
      demoTitle: '带搜索带全选多选',
      demoTitle_en: 'With search with all choices',
      demoDescription: '带搜索带全选多选',
      demoDescription_en: 'With search with all choices.',
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/select/demo8/demo8.component',
      demoTitle: '自定义选择器',
      demoTitle_en: 'Custom selector',
      demoDescription: '默认自定义头部和底部点击后不关闭下拉，手动关闭下拉通过调用toggleSelect(open: boolean)方式',
      demoDescription_en: `The default custom header and bottom click do not close the dropdown, manually close the dropdown by calling toggleSelect(open: boolean)`,
      devDebug: true,
    },
    {
      demo: Demo9Component,
      codePath: 'showcase/select/demo9/demo9.component',
      demoTitle: '后台搜索',
      demoTitle_en: 'Backstage search',
      demoDescription: '后台搜索',
      demoDescription_en: 'Backstage search.',
    },
    {
      demo: Demo10Component,
      codePath: 'showcase/select/demo10/demo10.component',
      demoTitle: '虚拟滚动',
      demoTitle_en: 'Virtual scrolling',
      demoDescription: '虚拟滚动',
      demoDescription_en: 'Virtual scrolling.',
    },
    {
      demo: DisabledComponent,
      codePath: 'showcase/select/disabled/disabled.component',
      demoTitle: '禁用',
      demoTitle_en: 'Disable',
      demoDescription: '禁用',
      demoDescription_en: 'Disable',
    },
    {
      demo: SimpleComponent,
      codePath: 'showcase/select/simple/simple.component',
      demoTitle: '精简模式',
      demoTitle_en: 'Simple mode',
      demoDescription: '通过设置外部容器来自定义对齐方式。',
      demoDescription_en: 'Customize the alignment by setting the outer container.',
    },
    {
      demo: AsyncDataComponent,
      codePath: 'showcase/select/async-data/async-data.component',
      demoTitle: '异步数据',
      demoTitle_en: 'Asynchronous data',
      demoDescription: '异步数据，使用lvAsync属性时，不可使用lvValueKey属性。若有默认选中项，需传入和option一致的对象数据',
      demoDescription_en:
        'For asynchronous data, when using the lvAsync attribute, the lvValueKey attribute cannot be used. If there is a default selected item, you need to pass in the object data that is the same as the option',
    },
    {
      demo: QuickAddComponent,
      codePath: 'showcase/select/quick-add/quick-add.component',
      demoTitle: '选项快速添加',
      demoTitle_en: 'Options Quick Add',
      demoDescription: '',
      demoDescription_en: '',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-select',
  snippet: `<lv-select [(ngModel)]='\${1:value}' [lvOptions]='\${2:data}'lvValueKey='\${3:value}' (ngModelChange)='\${4:change($event)}'> </lv-select>`,
  mApi: [
    {
      name: 'Select 属性',
      name_en: 'Select Options',
      api: [
        {
          attribute: 'lvOptions',
          type: 'OptionItem[]',
          default: '',
          description: `下拉数据。OptionItem 属性如下：
          <ul>
            <li>[key: any] 选项的关键key，具有唯一性 (可选)</li>
            <li>[label: any] 选项显示的名称 (必选)</li>
            <li>[value: any] 选项的value值 (可选)</li>
            <li>[isLeaf: boolean] 该选项是否是子选项 (可选)</li>
            <li>[children: OptionItem[]] 子选项 (可选)</li>
            <li>[disabled: boolean] 选项是否禁用，默认值 false (可选)</li>
            <li>[readonly: boolean] 选项是否只读，默认值 false (可选)</li>
          </ul>`,
          description_en: `Options data. The OptionItem properties are as follows:
          <ul>
            <li>[key: any] The key key of the option, unique (optional)</li>
            <li>[label: any] The name of the option (required)</li>
            <li>[value: any] Option value (optional)</li>
            <li>[isLeaf: boolean] Whether the option is a sub-option (optional)</li>
            <li>[children: OptionItem[]] Sub option (optional)</li>
            <li>[disabled: boolean] Whether the option is disabled, the default value is false (optional)</li>
            <li>[readonly: boolean] Whether the option is read-only, the default value is false (optional)</li>
          </ul>`,
        },
        {
          attribute: 'lvMode',
          type: `'single' | 'multiple'`,
          default: 'single',
          description: '下拉模式：单选、多选',
          description_en: 'Pull-down mode: radio, checkbox.',
        },
        {
          attribute: 'lvLoading',
          type: 'boolean',
          default: 'false',
          description: '是否为加载中状态',
          description_en: 'Indicates whether the status is loading.',
        },
        {
          attribute: 'lvSize',
          type: 'small | default | large',
          default: 'default',
          description: `选择框大小。`,
          description_en: `size of select.`,
        },
        {
          attribute: 'lvSimple',
          type: 'boolean',
          default: 'false',
          description: `是否为精简模式`,
          description_en: `Is it in streamlined mode`,
        },
        {
          attribute: 'lvPlaceholder',
          type: 'string',
          default: '请选择',
          description: '选择框默认文字',
          description_en: 'Select box default text.',
        },
        {
          attribute: 'lvPanelClass',
          type: 'string',
          default: ``,
          description: '下拉class，同ngClass格式',
          description_en: 'Drop down class, same as ngClass format.',
        },
        {
          attribute: 'lvPosition',
          type: 'topLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRight',
          default: 'bottomLeft',
          description: `基于触发点的位置 ('topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight')，默认为触发点的左下方。`,
          description_en: `The select panel is based on the location of trigger points ('topleft ' | 'topcenter' | 'topright ' | 'bottomleft' | 'bottomcenter ' | 'bottomright'), and it is located at the bottom-left of the trigger point. `,
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '设定disable状态',
          description_en: 'Set the disable state.',
        },
        {
          attribute: 'lvInline',
          type: 'boolean',
          default: 'false',
          description: `内联展示模式。`,
          description_en: `Inline display mode.`,
        },
        {
          attribute: 'lvCompareWith',
          type: 'string | ((o: any) => any)',
          default: '',
          description: 'data被选中的比较方式，默认value地址比较, o 为value',
          description_en: 'Data comparison method selected, default value address comparison, o is value.',
        },
        {
          attribute: 'lvFilterKey',
          type: 'string',
          default: '',
          description: '搜索的主键，过滤的key(对于对象来说)',
          description_en: 'Searched primary key, filtered key (for objects).',
        },
        {
          attribute: 'lvFilterPlaceholder',
          type: 'string',
          default: '搜索',
          description: '搜索框默认文字',
          description_en: 'Default text in the search box.',
        },
        {
          attribute: 'lvFilterMode',
          type: `'contains' | 'endsWith' | 'startsWith' | 'equals' | 'in' | 'timeIn' | 'rangIn'`,
          default: 'startsWith',
          description: '搜索模式',
          description_en: 'Search mode.',
        },
        {
          attribute: 'lvAsyncFilter',
          type: 'boolean',
          default: 'false',
          description: '是否为异步过滤',
          description_en: 'Is it asynchronous filtering?',
        },
        {
          attribute: 'lvFilterCaseSensitive',
          type: 'boolean',
          default: 'false',
          description: '搜索是否区分大小写',
          description_en: 'Search is case sensitive.',
        },
        {
          attribute: 'lvTrackBy',
          type: 'fn',
          default: '',
          description: '内容列表trackBy',
          description_en: 'Content list trackBy.',
        },
        {
          attribute: 'lvContentTemplate',
          type: 'TemplateRef<{ $implicit: any }>',
          default: '',
          description: '自定义内容模板',
          description_en: 'Custom content template',
        },
        {
          attribute: 'lvValueKey',
          type: 'string | ((o: any) => any)',
          default: '',
          description: '自定义value，默认源数据',
          description_en: 'Custom value, default source data.',
        },
        {
          attribute: 'lvScroll',
          type: '{ y?: string }',
          default: '{y: 288px}',
          description: '下拉选项最大高度，超过出滚动，请配置单个选项高度的整数倍',
          description_en: 'Drop-down option maximum height, over scrolling.Set this parameter to an integer multiple of the height of a single option.',
        },
        {
          attribute: 'lvVirtualScroll',
          type: 'boolean',
          default: 'false',
          description: '是否使用虚拟滚动（大数据场景使用）',
          description_en: 'Whether to use virtual scrolling (used in big data scenes).',
        },
        {
          attribute: 'lvVirtualItemSize',
          type: 'number',
          default: '32',
          description: '每行高度。lvSize为large时，默认值为40；lvSize为default时，默认值为32；lvSize为small时，默认值为24。',
          description_en: `The height of each row. When lvSize is large, the default value is 40; when lvSize is default, the default value is 32; when lvSize is small, the default value is 24.`,
        },
        {
          attribute: 'lvVirtualMaxBuffer',
          type: 'number',
          default: '200',
          description: '渲染新项时最大缓冲高度',
          description_en: 'Maximum buffer height when rendering new items.',
        },
        {
          attribute: 'lvShowFilter',
          type: 'boolean',
          default: 'false',
          description: '是否展示过滤',
          description_en: 'Whether to show filtering.',
        },
        {
          attribute: 'lvCustomFilter',
          type: '<T>(data: T[], filter: FilterConfig) => T[]',
          default: '',
          description: '自定义过滤方法',
          description_en: 'Custom filtering method.',
        },
        {
          attribute: 'lvCustomItemFilter',
          type: '<T>(data: T, filter: FilterConfig) => boolean',
          default: '',
          description: '自定义单项过滤方法',
          description_en: 'Custom single item filtering method.',
        },
        {
          attribute: 'lvShowCheckAll',
          type: 'boolean',
          default: 'false',
          description: '是否支持全选',
          description_en: 'Whether to support all elections.',
        },
        {
          attribute: 'lvAsync',
          type: 'boolean',
          default: 'false',
          description: '是否为异步数据。使用lvAsync属性时，不可使用lvValueKey属性。若有默认选中项，需传入和option一直的对象数据',
          description_en:
            'Is it asynchronous data. When using the lvAsync attribute, the lvValueKey attribute cannot be used. If there is a default selected item, you need to pass in the object data that is the same as the option',
        },
        {
          attribute: 'lvShowClear',
          type: 'boolean',
          default: 'false',
          description: '是否显示清除按钮',
          description_en: 'Whether to show the clear button',
          global: true,
        },
        {
          attribute: 'lvMaxTagRow',
          type: 'number',
          default: '7',
          description: '选中项单行模式下，点了+n之后，超过7（包含收起，可配置）行则出现滚动条，配置可参考多选demo',
          description_en:
            'In the single-line mode of the selected item, after +n is clicked, the scroll bar is displayed if more than seven lines (including the collapsed and configurable) are displayed. The scroll bar is mutually exclusive with lvMaxTagCount.',
        },
        {
          attribute: 'lvMaxTagCount',
          type: 'number',
          default: '-',
          description: '选中项个数模式下，最多显示多少个 label tag。默认为选中项单行模式，配置可参考多选demo',
          description_en:
            'Maximum number of labels and tags that can be displayed in the number of selected items mode. By default, the single-line mode is selected. For details about the configuration, see the multi-choice demo.',
        },
        {
          attribute: 'lvBeforeOpen',
          type: 'fn',
          default: '',
          description: '打开下拉面板前的回调函数，执行异步事件时，返回值为false可阻止打开。',
          description_en:
            'The callback function before the drop-down panel is opened. When an asynchronous event is executed, the return value is false to prevent the drop-down panel from being opened.',
        },
        {
          attribute: 'lvShowAddOption',
          type: 'boolean | { addBtn?: boolean; addAndSelectBtn?: boolean }',
          default: 'false',
          description: '是否显示快速添加。',
          description_en:
            'Display Quick Add.',
        },
        {
          attribute: 'lvOnAddOption',
          type: '(inputValue: string) => void | Promise<void> | Observable<void>',
          default: '',
          description: '点击添加按钮的回调。',
          description_en:
            'Callback for clicking the Add button.',
        },
        {
          attribute: 'lvOnAddAndSelectOption',
          type: '(inputValue: string) => void | Promise<void> | Observable<void>',
          default: '',
          description: '点击添加并选择按钮的回调。',
          description_en:
            'Callback for clicking the Add and Select button.',
        },
      ],
      event: [
        {
          event: 'lvOpenChange',
          parameter: ``,
          description: '切换选择下拉回调事件',
          description_en: 'Toggle selection drop-down callback event.',
        },
        {
          event: 'lvFilterChange',
          parameter: ``,
          description: '搜索文本框变化时回调事件',
          description_en: 'Callback event when searching for text box changes.',
        },
        {
          event: 'lvClearChange',
          parameter: ``,
          description: '清除全部时回调事件',
          description_en: 'Clear all callback events.',
        },
        {
          event: 'lvRemoveChange',
          parameter: ``,
          description: '删除单个时回调事件',
          description_en: 'Delete single callback event.',
        },
        {
          event: 'lvFocus',
          parameter: ``,
          description: '下拉展示区获取焦点时回调事件',
          description_en: 'Callback event when the drop-down display area gets focus.',
        },
        {
          event: 'lvBlur',
          parameter: ``,
          description: '下拉展示区失去焦点时回调事件',
          description_en: 'Callback event when the drop-down display area loses focus.',
        },
        {
          event: 'lvScrollEnd',
          parameter: ``,
          description: '虚拟滚动到底部时回调事件。若配置了lvScroll，请配置单个选项高度的整数倍',
          description_en: 'Callback event when virtual scrolling to the bottom.If lvScroll is configured, set this parameter to an integer multiple of the height of a single option.',
        },
        {
          event: 'lvScrollingChange',
          parameter: ``,
          description: '虚拟滚动中回调事件',
          description_en: 'Virtual scrolling callback event.',
        },
      ],
    },
  ],
};
